import { defineComponent, onMounted, reactive, ref } from "vue";
import { Swipe, SwipeItem } from 'vant';
import RecommendList from "./Recommend";
import Scroll from '../Scroll'
import './style.scss'
import { getBannerRequest } from "../../api/api";

export default defineComponent({
  name: 'Home',
  setup() {
    const scrollRef = ref(null)
    const state = reactive({
      bannerList: []
    })

    const renderBanner = () => (
      <Swipe className="banner" loop={false} indicator-color='rgb(212, 68, 57)'>
        {
          state.bannerList.map((item) => (
            <SwipeItem>
              <img src={item.imageUrl} />
            </SwipeItem>
          ))
        }
      </Swipe>
    )

    onMounted(() => {
      getBannerRequest().then((res) => {
        state.bannerList = res.banners
        scrollRef.value.refresh()
      })
    })

    return () => (
      <Scroll scrollY={true} ref={scrollRef}>
        <div className="home">
          <div>
            <div className="before"></div>
            <div className="banner-wrapper">
              { renderBanner() }
            </div>
          </div>
          <h1 className="title">推荐歌单</h1>
          <RecommendList />
        </div>
      </Scroll>
    )
  }
})